<template>
  <div class="app-main">
    <div class="compTitle">团队成员</div>
    <div class="team-container">
      <div class="member-item" v-for="member in members" :key="member.role">
        <img :src="member.avatar" alt="member" class="avatar" />
        <div class="member-info">
          <h2>{{ member.role }}</h2>
          <p>{{ member.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'AboutUs',
  data() {
    return {
      members: [
        {
          role: "创办人",
          avatar: "/src/imgs/01.jpg", // 替换为实际头像路径
          description: "Ethan是一位经验丰富的企业家，在科技行业拥有超过15年的经验。他有成功建立和扩展公司的实绩，热衷于创造解决现实问题的创新方案。在创立Innovatech之前，他在多家高成长型初创公司担任要职，发挥产品开发、营销和销售的核心作用。他拥有斯坦福大学计算机科学学位。"
        },
        {
          role: "系统架构师",
          avatar: "/src/imgs/02.jpg", // 替换为实际头像路径
          description: "Liam是一位销售领导者，有建立和管理高绩效销售团队的实绩。他深入理解销售策略、销售运营和客户关系管理。在创立Innovatech之前，他在多家成功公司担任销售领导角色，并持续超过销售目标。他拥有密歇根大学经济学学位。"
        },
        {
          role: "算法研发师",
          avatar: "/src/imgs/03.jpg", // 替换为实际头像路径
          description: "Noah是一位产品领导者，有将创新产品推向市场的实绩，深入理解用户需求和市场趋势，热衷于创造让用户满意的产品。在创立Innovatech之前，他在多家成功初创公司担任产品管理角色，领导开发获奖产品。他拥有宾夕法尼亚大学工商管理学位。"
        },
        {
          role: "监事/财务/会计",
          avatar: "/src/imgs/04.jpg", // 替换为实际头像路径
          description: "Ava是一位行销专家，热衷于建立品牌和推动成长。她深入理解数码行销、内容行销和社群媒体行销。在创立Innovatech之前，她在多家高成长公司担任行销领导角色，开发并执行成功的行销活动。她拥有加州大学柏克莱分校行销学位。"
        }
      ]
    }
  },
  mounted() {
    //this.ruleFormRef = this.$refs.ruleFormRef;

  },
  methods: {



  }
}
</script>

<style scoped>

.compTitle {
  margin: 0 auto;
  width: 90%;
  font-family: Inter, Inter;
  font-weight: bold;
  font-size: 32px;
  color: #0F141A;
  line-height: 40px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.team-container {
  width: 90%;
  margin: 20px auto;
  
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.member-item {
  display: flex;
  margin-bottom: 60px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.member-info {
  flex: 1;
}

h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

p {
  font-size: 14px;
  line-height: 1.5;
}

</style>